<!DOCTYPE html>
<html>
  <!-- Html Head Tag-->
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Rms">
  <!-- Open Graph Data -->
  <meta property="og:title" content="Vue语法使用"/>
  <meta property="og:description" content="" />
  <meta property="og:site_name" content="帅的一逼"/>
  <meta property="og:type" content="article" />
  <meta property="og:image" content="http://shsa.gitee.io"/>
  
    <link rel="alternate" href="/atom.xml" title="帅的一逼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  

  <!-- Site Title -->
  <title>帅的一逼</title>

  <!-- Bootstrap CSS -->
  
<link rel="stylesheet" href="/myblog/css/bootstrap.min.css">

  <!-- Custom CSS -->
  
  
<link rel="stylesheet" href="/myblog/css/style.light.css">


  <!-- Google Analytics -->
  

<meta name="generator" content="Hexo 4.2.1"></head>

  <body>
    <!-- Page Header -->


<header class="site-header header-background" style="background-image: url(/myblog//img/i.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="page-title with-background-image">
          <p class="title">Vue语法使用</p>
          <p class="subtitle"></p>
        </div>
        <div class="site-menu with-background-image">
          <ul>
            
              <li>
                <a href="/myblog/">
                  
                  Home
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/archives">
                  
                  Archives
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/about">
                  
                  About
                  
                </a>
              </li>
            
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<article>
  <div class="container typo">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="post-info text-muted">
          
            <!-- Author -->
            <span class="author info">By Rms</span>
          
          <!-- Date -->
          <span class="date-time info">On
            <span class="date">2020-06-29</span>
            <span class="time">21:53:53</span>
          </span>
          
        </div>
        <!-- Tags -->
        
        <!-- Post Main Content -->
        <div class="post-content">
          <h1 id="Vue基本语法使用"><a href="#Vue基本语法使用" class="headerlink" title="Vue基本语法使用"></a>Vue基本语法使用</h1><h3 id="vue起步"><a href="#vue起步" class="headerlink" title="vue起步"></a>vue起步</h3><p>1.获取值格式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--message对应于vm中data中message--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>消息:&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>姓名:&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>年龄:&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>性别:&#123;&#123;sex&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>2.vue语法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">/*</span><br><span class="line">    * 创建了一个vm的vue对象</span><br><span class="line">    * el:element的缩写  元素  就是vue作用的范围</span><br><span class="line">    * data: 就是vue的数据  键值对   类似json数据</span><br><span class="line">    * 可以通过插值表达式进行绑定</span><br><span class="line">    *</span><br><span class="line">    * */</span><br><span class="line">   var vm=new Vue(&#123;</span><br><span class="line">       el:'#app', /*千万别忘记   ‘’别搞错*/</span><br><span class="line">       data:&#123;</span><br><span class="line">           message:'Hello Vue',</span><br><span class="line">           name:'',</span><br><span class="line">           age: 1,</span><br><span class="line">           sex:'男'</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="点击页面跳转"><a href="#点击页面跳转" class="headerlink" title="点击页面跳转"></a>点击页面跳转</h3><ol>
<li><pre><code class="html"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span>
<span class="comment">&lt;!--使用v-bind这个语法--&gt;</span>
<span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">a</span>&gt;</span> 
<span class="tag">&lt;/<span class="name">div</span>&gt;</span>
<span class="comment"><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. &#96;&#96;&#96;html</span><br><span class="line">    var vm&#x3D;new Vue(&#123;</span><br><span class="line">       &lt;!--获取得到app这个元素--&gt;</span><br><span class="line">           el:&#39;#app&#39;, </span><br><span class="line">       &lt;!--对url进行赋值  点击跳转则得到这个地址--&gt;</span><br><span class="line">           data:&#123;</span><br><span class="line">               url:&#39;https:&#x2F;&#x2F;www.baidu.com&#39;</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;);</span><br></pre></td></tr></table></figure></span>
</code></pre>
</li>
</ol>
<h3 id="vue样式操作"><a href="#vue样式操作" class="headerlink" title="vue样式操作"></a>vue样式操作</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">"classes"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line">           classes:'app'</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>

<h3 id="vue插值表达式"><a href="#vue插值表达式" class="headerlink" title="vue插值表达式"></a>vue插值表达式</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    &#123;&#123;title&#125;&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--获取数组中的值--&gt;</span></span><br><span class="line">    &#123;&#123;[1,2,3,][1]&#125;&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--获取数组中的值--&gt;</span></span><br><span class="line">    &#123;&#123; &#123;"name":"xiaoyu","age":20&#125;.age &#125;&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--获取对象中值--&gt;</span></span><br><span class="line">    &#123;&#123;person.age&#125;&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--获取方法--&gt;</span></span><br><span class="line">    &#123;&#123;seihai()&#125;&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--获取方法--&gt;</span></span><br><span class="line">    &#123;&#123;getName()&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line">    * 多个数据使用,隔开</span><br><span class="line">    *</span><br><span class="line">    * @type &#123;Vue&#125;</span><br><span class="line">    */</span><br><span class="line">   var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line">       title:'Vue入门',</span><br><span class="line">       person:&#123;</span><br><span class="line">           age:18,</span><br><span class="line">           name:'小鸡鸡'</span><br><span class="line">       &#125;</span><br><span class="line">       &#125;,</span><br><span class="line"></span><br><span class="line">       /**</span><br><span class="line">        * vue定义方法</span><br><span class="line">        */</span><br><span class="line">       methods:&#123;</span><br><span class="line">           seihai:function () &#123;</span><br><span class="line">                   alert(123)</span><br><span class="line">           &#125;,</span><br><span class="line"></span><br><span class="line">          /* ES6的语法   定义方法*/</span><br><span class="line">           sayHi()&#123;</span><br><span class="line">               alert(456)</span><br><span class="line">           &#125;,</span><br><span class="line">           getName() &#123;</span><br><span class="line">               alert(this.person.name)</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="v-show显示隐藏"><a href="#v-show显示隐藏" class="headerlink" title="v-show显示隐藏"></a>v-show显示隐藏</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"showHide"</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--v-show=true为显示元素 flase为隐藏--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span> <span class="attr">v-show</span>=<span class="string">"flagaa"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">         el:'#app',</span><br><span class="line">         data:&#123;</span><br><span class="line">           flagaa:true</span><br><span class="line">         &#125;,</span><br><span class="line">         methods:&#123;</span><br><span class="line">             showHide()&#123;</span><br><span class="line">                 this.flagaa=false;</span><br><span class="line">             &#125;</span><br><span class="line">         &#125;</span><br><span class="line">     &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="v-on的应用"><a href="#v-on的应用" class="headerlink" title="v-on的应用"></a>v-on的应用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    请输入用户名<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-on:keyup.enter</span>=<span class="string">"space"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line"></span><br><span class="line">       &#125;,</span><br><span class="line">       methods:&#123;</span><br><span class="line">           submit()&#123;</span><br><span class="line">               alert("按下了回车键")</span><br><span class="line">           &#125;,</span><br><span class="line">           space(event)&#123;</span><br><span class="line">               alert("用户名不能存在空格")</span><br><span class="line">               event.target.value=event.target.value.trim()</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="computed计算属性"><a href="#computed计算属性" class="headerlink" title="computed计算属性"></a>computed计算属性</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--把逻辑写在插值表达式中不是特别容易理解--&gt;</span></span><br><span class="line">    &#123;&#123;addressReverse&#125;&#125;</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">        el:'#app',</span><br><span class="line">        data:&#123;</span><br><span class="line">            message:'金霞保税店-开福区-长沙市-湖南省'</span><br><span class="line">        &#125;,</span><br><span class="line">        /**</span><br><span class="line">         * 专门对结果进行换算的   结果不轻易会被清掉   会保存</span><br><span class="line">         * addressReverse虽然是方法格式  但是他是属性</span><br><span class="line">         * addressReverse计算属性  不是计算方法</span><br><span class="line">         */</span><br><span class="line">        computed:&#123;</span><br><span class="line">            addressReverse()&#123;</span><br><span class="line">              return this.message.split('-').reverse().join('.')</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="computed计算属性的应用"><a href="#computed计算属性的应用" class="headerlink" title="computed计算属性的应用"></a>computed计算属性的应用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>当前时间方法:&#123;&#123;currenTime()&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>当前时间属性:&#123;&#123;currenTime1&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line">           currenTime1: Date.now()</span><br><span class="line">       &#125;,</span><br><span class="line"></span><br><span class="line">       methods:&#123;</span><br><span class="line">           currenTime()&#123;</span><br><span class="line">               return Date.now();</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="v-for循环"><a href="#v-for循环" class="headerlink" title="v-for循环"></a>v-for循环</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(name,i) in names"</span> <span class="attr">:key</span>=<span class="string">"i"</span>&gt;</span>&#123;&#123;i&#125;&#125;-------------&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line">       names:['jj','dd','aa']</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="v-html内容展示"><a href="#v-html内容展示" class="headerlink" title="v-html内容展示"></a>v-html内容展示</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--相当于js中的innerHtml  innerText--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"name"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--插值表达式和text都不会解析标签--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">"name"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line">       name:'<span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello <span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>

<h3 id="v-if表达式运用"><a href="#v-if表达式运用" class="headerlink" title="v-if表达式运用"></a>v-if表达式运用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--v-if  == if</span></span><br><span class="line"><span class="comment">     v-else-if  == if else if</span></span><br><span class="line"><span class="comment">     v-else  == if else</span></span><br><span class="line"><span class="comment">     --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>这是一个span<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-if</span>=<span class="string">"name=='r'"</span>&gt;</span>是本人<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-else-if</span>=<span class="string">"name=='ra'"</span>&gt;</span>是ra<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-else</span>&gt;</span>是其他人<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">        el:'#app',</span><br><span class="line">        data:&#123;</span><br><span class="line">            flag:false,</span><br><span class="line">            name:'raa'</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        methods:&#123;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="v-mode双向数据绑定"><a href="#v-mode双向数据绑定" class="headerlink" title="v-mode双向数据绑定"></a>v-mode双向数据绑定</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">   <span class="comment">&lt;!-- 双向数据绑定v-model--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    &#123;&#123;name&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line">     * v-model="name" 会关联vm对象中的name属性</span><br><span class="line">     * vm中name一旦改变  会改变插值表达式的值</span><br><span class="line">     * @type &#123;Vue&#125;</span><br><span class="line">     */</span><br><span class="line">    var vm=new Vue(&#123;</span><br><span class="line">        el:'#app',</span><br><span class="line">        data:&#123;</span><br><span class="line">            name:'小鸡鸡'</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="v-mode的应用"><a href="#v-mode的应用" class="headerlink" title="v-mode的应用"></a>v-mode的应用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--v-model.number也可以指定他为数字--&gt;</span></span><br><span class="line">       请输入Login java的成绩: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"java"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span>请输入Login html的成绩:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"html"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span>请输入Login sql的成绩: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"sql"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>总分:&#123;&#123;sum()&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line">           java:0,</span><br><span class="line">           html:0,</span><br><span class="line">           sql:0,</span><br><span class="line">       &#125;,</span><br><span class="line"></span><br><span class="line">       methods:&#123;</span><br><span class="line">           sum()&#123;</span><br><span class="line">              var java=  parseInt(this.java)</span><br><span class="line">               var html= parseInt(this.html)</span><br><span class="line">               var sql= parseInt(this.sql)</span><br><span class="line">               return java+html+sql;</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>



<h3 id="v-on绑定事件"><a href="#v-on绑定事件" class="headerlink" title="v-on绑定事件"></a>v-on绑定事件</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--v-on绑定方法 可以不用方法  click事件必须加上    v-on可以用@代替--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show"</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--&lt;button v-on:mouseover="showjj" style="width: 200px;height: 200px ; border: red"&gt;点击&lt;/button&gt;--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> @<span class="attr">input</span>=<span class="string">"show1"</span>&gt;</span></span><br><span class="line">    &#123;&#123;msg&#125;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">"src"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">var vm=new Vue(&#123;</span><br><span class="line">       el:'#app',</span><br><span class="line">       data:&#123;</span><br><span class="line">           src:'', /* 先赋值一个空的   点击时调用他方法*/</span><br><span class="line">           msg:''</span><br><span class="line">       &#125;,</span><br><span class="line">       methods:&#123;</span><br><span class="line">           show()&#123;</span><br><span class="line">               this.src='img/i.jpg'</span><br><span class="line">           &#125;,</span><br><span class="line">           showjj()&#123;</span><br><span class="line">              alert("adfs")</span><br><span class="line">           &#125;,</span><br><span class="line">           /*</span><br><span class="line">           event代表事件源    event.target当前目标对象</span><br><span class="line">           * 实现前面输入后面显示</span><br><span class="line">           * */</span><br><span class="line">           show1(event)&#123;</span><br><span class="line">               this.msg=event.target.value</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>


        </div>
      </div>
    </div>
  </div>
</article>



    <!-- Footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <p class="copyright text-muted">
          Theme By <a target="_blank" href="https://github.com/levblanc">Levblanc.</a>
          Inspired By <a target="_blank" href="https://github.com/klugjo/hexo-theme-clean-blog">Clean Blog.</a>
        <p class="copyright text-muted">
          Powered By <a target="_blank" href="https://hexo.io/">Hexo.</a>
        </p>
      </div>
    </div>
  </div>
</footer>


    <!-- After Footer Scripts -->

<script src="/myblog/js/highlight.pack.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var codeBlocks = Array.prototype.slice.call(document.getElementsByTagName('pre'))
    codeBlocks.forEach(function(block, index) {
      hljs.highlightBlock(block);
    });
  });
</script>

  </body>
</html>

